<template>
	<view>
		<view class="title flex align">
			<image src="/static/mine/icon1.png" mode="widthFix"></image>
			<view>我的建议</view>
		</view>
		<view class="card">
			<view class="infos">
				<view>建议内容：{{info.content}}</view>
				<view>
					图片
				</view>
				<view class="flex align">
					<image @click="pre(item)" v-for="(item,index) in info.images" :key="index" :src="item">
					</image>
				</view>
				<view>提交时间：{{info.create_time}}</view>
			</view>
		</view>
		<view style="position: relative;">
			<image src="/static/mine/img1.png" class="status-img" v-if="info.status==1"></image>
			<image src="/static/mine/img2.png" class="status-img" v-else></image>
			<view class="title flex align">
				<image src="/static/mine/icon1.png" mode="widthFix"></image>
				<view>回复状态</view>
			</view>
			<view class="card">
				<image src="/static/mine/img3.png" class="null-img" v-if="info.status==1"></image>
				<view v-if="info.status==2">
					<view class="infos">
						<view>回复内容：</view>
						<view>{{info.reply}}</view>
						<view class="flex align">
							<image @click="pre2(item)" v-for="(item,index) in info.reply_images" :key="index" :src="item">
							</image>
						</view>
					</view>
					<view class="infos">
						<view>回复时间：</view>
						<view>{{info.reply_time}}</view>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		feedbackMyDetail
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
               id:'',
			   info:'',
			   ws: null,
			   path: '/pages/suggest/detail'
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods:{
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					//console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path: that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			async getDetail(){
				const result = await feedbackMyDetail({feedback_id:this.id})
				if(result.code==1){
					this.info = result.data
				}else if(result.code=='10000'||result.code=='10003'){
					
				}
			},
			pre(img){
				let arr = this.info.images
				uni.previewImage({
					urls:arr,
					current:img
				})
			},
			pre2(img){
				let arr = this.info.reply_images
				uni.previewImage({
					urls:arr,
					current:img
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/mySuggest/info.wxss */
	page {
		background: #F5F5F5;
	}

	.title {
		padding: 32rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.title image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.card {
		padding: 30rpx 30rpx 10rpx;
		background: white;
	}

	.infos {
		font-size: 26rpx;
	}

	.infos view {
		margin-bottom: 20rpx;
	}

	.infos image {
		width: 120rpx;
		height: 80rpx;
		object-fit: cover;
		margin-right: 5rpx;
	}

	.status-img {
		width: 170rpx;
		height: 134rpx;
		right: 61rpx;
		top: 0;
		position: absolute;
	}

	.null-img {
		width: 178rpx;
		height: 129rpx;
		display: block;
		margin: 20rpx auto 50rpx;
	}
</style>